今天來試試看用

transform: translate

來達到置中的目的吧！

<div class="animalCage">
  <img class="mice" src="https://drive.google.com/uc?id=1D2We8Pp0FGEAGiBMIfMnzsMg8RnAIkWb" width=150px>
</div>

.animalCage {
  background-color : #00aa00;
  height: 300px;
  width: 500px;
  border: 3px solid;
}

.mice {
  position: relative;
  top: 50%;
}

讓mice和top距離50% (這裡指的是外框)
再加上

transform: translateY(-50%);

mice會往上移動50% 的距離 (這裡指的是圖片的大小)

這樣，就達到垂直置中的效果了！

如果加上

left: 50%; 
transform: translate(50%,-50%);

就可以同時達到水平及垂直置中的效果了。

但是！！！
如果改成這樣寫

.mice {
  position: relative;
  top: 50%;
  left: 50%; 
  transform: translateY(-50%);
  transform: translateX(-50%); 
}

為什麼置中的效果都消失了呢？？？

希望可以找個時間研究看看呢....